//登录框【显示】
// 获取登录/注册 整个按钮
var  loginObj = document.querySelector("section .member div") 
// 绑定点击事件
loginObj.onclick = function (){
    // 获取登录框
    var loginDialog = document.querySelector("section.login .item")
   // 显示登录框
    loginDialog.style.visibility = "visible"
}


// 登录框【隐藏】
//获取关闭按钮 
var loginCloseBtn = document.querySelector("section.login i.icon-close")
//绑定点击事件
loginCloseBtn.onclick = function (){
    var loginDialog = document.querySelector("section.login .item")
    loginDialog.style.visibility = "hidden"
}

//------------------------------------------------------------------
//点击蓝色菜单实现鼠标位置拖拽

//获取登录框里面的蓝色区域 绑定鼠标按下事件
 var loginBlue = document.querySelector("section.login .menu")
 loginBlue.onmousedown = function (evt){
     var downE = evt || window.event     
     //给网页绑定鼠标移动事件
     document.onmousemove = function (evt){
     // 事件函数处理中  让登录框跟随鼠标移动
     //获取事件对象
    var e = evt ||window.event

    //获取鼠标拖拽位置
    var left = e.clientX - downE.offsetX 
    var top =  e.clientY - downE.offsetY

    //给登录框移动边界限制
   if (left < 0)  left = 0
   if (top < 0)  top = 0
   var loginDialog = document.querySelector("section.login .item")
   var maxLeft = (window.innerWidth || document.documentElement.clientWidth)-loginDialog.offsetWidth
   var maxTop = (window.innerHeight || document.documentElement.clientHeight)-loginDialog.offsetHeight
   if (left > maxLeft) left = maxLeft
   if (top > maxTop)  top = maxTop
   
   // 给登录框进行定位 设置left top
   loginDialog.style.position = "absolute"
   loginDialog.style.left = left + "px"
   loginDialog.style.top = top + "px"

     }

//给网页绑定鼠标松开事件  让登录框移动事件取消
document.onmouseup = function (){
    document.onmousemove = null
}
 }

 

 //-----------------------------------------
 //登录验证码倒计时行为验证码
 
 //获取验证码按钮 绑定点击事件
 var num = 5
  var  captchaBtn = document.querySelector("section.login .captcha")
  captchaBtn.onclick = function (){
  //----------------------  
// 行为验证码
 //获取行为验证码动态图片,显示图片
 var captchaObj = document.querySelector("section.captcha")
 captchaObj.style.visibility="visible"

//获取关闭按钮，绑定点击事件
 document.querySelector("section.captcha i.icon-close").onclick = function (){
   //关闭行为验证码框
  captchaObj.style.visibility="hidden"
}
  //获取圆圈，绑定鼠标按下事件
   var yuanBtn = captchaObj.querySelector(".drag .btn")
   yuanBtn.onmousedown = function (){
    //给网页绑定鼠标移动事件,让盒模型跟随鼠标移动
    document.onmousemove = function (evt){
      //获取事件对象
      var e = evt || window.event
      //获取鼠标拖拽位置 （此动态验证码有位移，所以需要减去元素宽度一半，实现鼠标位置）
      var left = e.clientX - (captchaObj.offsetLeft - captchaObj.offsetWidth/2) - yuanBtn.offsetWidth
      //给圆圈和拼图定位，设置同步
     yuanBtn.style.left = left +"px"
      var imgObj = captchaObj.querySelector(".check img:nth-of-type(2)")
         imgObj.style.left = left +"px"
      //移动边界限制
    }
   //给网页绑定鼠标松开事件，取消移动事件
   document.onmouseup = function (){
    document.onmousemove = null
    //行为验证码拖拽误差范围  260-265之间
    var value = parseInt(yuanBtn.style.left)
    //判断行为验证码是否正确 ，在误差范围内就正确
    if(value>=260 && value <=265){
      //验证正确，行为验证码框隐藏
      captchaObj.style.visibility = "hidden"
      // 事件处理中 -- 1更换验证码框文本  2定义一个全局变量num，值为秒数 3 定时器同步秒数
     captchaBtn.innerText = num+'秒后重发'
     captchaBtn.disabled = true   // 解决重复点击bug ，button的属性，为true不能点击
  t = setInterval(function (){
//判断：停止定时器  重置内容   终止代码执行
   if (num <=1 ) {
    clearInterval (t)
captchaBtn.innerText = "重新发送"
captchaBtn.disabled = false   // 解决重复点击bug ，button的属性，为flase能点击
     num =  5     
     return
}
    //重置内容
    num--  //定时器一秒 num--
    captchaBtn.innerText = num+'秒后重发'
},1000) 
  }
  //行为验证码不管是否正确，都重置圆圈和卡片位置
  yuanBtn.style.left = "0px"
  var imgObj = captchaObj.querySelector(".check img:nth-of-type(2)")
  imgObj.style.left = "0px"
    }
   }
   return
  }

//   var num = 5
//   var  captchaBtn = document.querySelector("section.login .captcha")
//   captchaBtn.onclick = function (){

//     // 事件处理中 -- 1更换验证码框文本  2定义一个全局变量num，值为秒数 3 定时器同步秒数
//     captchaBtn.innerText = num+'秒后重发'
//     captchaBtn.disabled = true   // 解决重复点击bug ，button的属性，为true不能点击
//  t = setInterval(function (){
// //判断：停止定时器  重置内容   终止代码执行
//   if (num <=1 ) {
//    clearInterval (t)
// captchaBtn.innerText = "重新发送"
// captchaBtn.disabled = false   // 解决重复点击bug ，button的属性，为flase能点击
//     num =  5
//     return
// }
//    //重置内容
//    num--  //定时器一秒 num--
//    captchaBtn.innerText = num+'秒后重发'
// },1000) 
//  }



  //----------------------------

  //登录框表单验证

  // 获取【登录/注册】按钮
   var loginSubmitBtn = document.querySelector("section.login .submit")
  // 绑定点击事件
  loginSubmitBtn.onclick = function (){
   //事件处理函数中   
  // 1.获取手机号和验证码按钮
  var num = 0
  var inputObj1 = document.querySelector("section.login .mobile")
  var inputObj2 = document.querySelector("section.login .password")
  // 2. 判断手机号和验证码是否正确  
  //手机号必须是11位数字   
  if (inputObj1.value == ""|| inputObj1.value.length!=11 || !Number(inputObj1.value)) {
  // 3.判断成立，登录成功
  document.querySelector("section.login .form > p:nth-of-type(3)").innerText="手机号有误"
  } else {
    num ++
    document.querySelector("section.login .form > p:nth-of-type(3)").innerText=""
  }
// 判断：验证码必须是4位数字
  if (inputObj2.value == ""|| inputObj2.value.length!=4 || !Number(inputObj2.value)) {
    // 3.判断成立，登录成功
    document.querySelector("section.login .form > p:nth-of-type(4)").innerText="验证码有误"
    } else {
      num ++
      document.querySelector("section.login .form > p:nth-of-type(4)").innerText=""
    }
    //都验证成功，表单提交
    if(num == 2){
    alert("登录成功")
    }
  }
  